<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <form class="layui-form center">
                    <div id="permTree" class="xtree_contianer"></div>
                    <hr>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="permSave">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--引用xtree-->
<script src="layui/layui-xtree/layui-xtree.js"></script>
<script>
    layui.use('form',function(){
        var form = layui.form
                ,$ = layui.$
                ,element = layui.element
                ,layer = layui.layer
                ,view = layui.view
                ,admin = layui.admin;
        // 导航
        element.render('breadcrumb', 'breadcrumb');
        var roleId = view.getOpenParams('roleId');
        var permTree;
        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/sys/role/permission_view',
            data: {
                 roleId : roleId
            },
            error: function(err){
                layer.alert(JSON.stringify(err.field), {
                    title: '错误提示'
                })
            },
            success: function(res){
                if(res.code == 0){
                    permTree = new layuiXtree({
                        elem: 'permTree'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
                        , form: form     //(必填) layui 的 from
                        , data: res.data     //(必填) json数据
                    });
                }
            }
        });

        form.on('submit(permSave)', function(data) {
            // 获取所有选中的
            var oCks = permTree.GetAllCheckBox();
            var resourceIds = "";
            for (var i = 0; i < oCks.length; i++) {
                if(oCks[i].checked) {
                    resourceIds = resourceIds + "," + oCks[i].value;
                }
            }
            resourceIds = resourceIds.substring(1);
            //console.log(resourceIds);

            //这里可以写ajax方法提交表单
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/sys/role/permission_save',
                data: {
                    roleId: roleId,
                    resourceIds: resourceIds,
                },
                success: function(res){
                    if(res.code == 0) {
                        layer.alert(res.msg, {title: "保存成功"}, function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        });
                    }else {
                        layer.alert(res.msg, {
                            title: '保存失败'
                        });
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })
</script>